//封装弹窗组件
import "@/assets/style.scss";
import PropTypes from "prop-types";
import {useState} from "react";
function Modal(props) {
    let { title, closable,children,visiable,onCancel,onOk } = props;
    //点击遮罩层
    let handerLayer=(e)=>{
        if(e.target.dataset.self){
            onCancel()
        }
    }
    return (
        <div 
            className="ml-layer" 
            style={{display:visiable?'block':'none'}}
            data-self="layer"
            onClick={handerLayer}
        >
            <div className="ml-modal">
                <header>
                    <div>
                        <div>{title}</div>
                        <div onClick={onCancel}>{closable && "X"}</div>
                    </div>
                </header>
                <main>
                    {children}
                </main>
                <footer>
                    <Button type="primary" onClick={onOk}>确定</Button>
                    <Button type="danger" onClick={onCancel}>取消</Button>
                </footer>
            </div>
        </div>
    )
}

Modal.propTypes = {
    title:PropTypes.elementType,
    closable:PropTypes.bool,
    children:PropTypes.node,
    visiable:PropTypes.bool,
    onCancel:PropTypes.func,
    onOk:PropTypes.func
}
Modal.defaultProps = {
    title:"默认小标题",
    closable:true,
    children:<div>主体内容默认值</div>,
    visiable:false,
    onCancel:()=>{},
    onOk:()=>{}
}

function Button(props){
    let {type,children,onClick} = props;
    return(
        <div className="ml-button">
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}

Button.propTypes = {
    type:PropTypes.oneOf(["default","primary","danger","info"]),
    children:PropTypes.node,
    onClick:PropTypes.func,
    onClick:PropTypes.func
}
Button.defaultProps = {
    type:'default',
    children:'按钮',
    onClick:()=>{}
}

function PageA() {
    //定义一个状态控制弹窗显示与否
    let [visiable,setVisiable] = useState(false);
    let submit = ()=>{
        setTimeout(()=>{
            setVisiable(false)
        },300)
    }
    return (
        <div>
            <button onClick={()=>setVisiable(true)}>open modal</button>
            <Modal 
                title={'添加用户'} 
                closable 
                visiable={visiable}
                onCancel={()=>setVisiable(false)}
                onOk={submit}
            >
                <div>
                    <input type="text"/>
                    <div>你确定要添加此用户吗?</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA;

















